How to Create Effective Big Website Headlines
Unconventional Sources of Design Inspiration
A Comprehensive Guide to Mockups in Web DesignHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
The Principles of Great Call to Action Buttons
A call-to-action within a web context is any part of a website that prompts the user to take action. This includes any image or text links, or other interactive features.
This article will focus exclusively on call-to-action buttons, so only on buttons, not regular links. Buttons are the most recognizable call-to-action format, and are generally used for the primary call-to-action.
A primary call-to-action is the most important action that you would like your users to make. Therefore often a primary call-to-action such as ‘SIGN UP’ will warrant a custom designed button, whereas more minor calls-to-action will use regular links.
This article will analyze how to get the most out of your call-to-action buttons. Ideally you should try to use all of the points laid out below, and you should get much higher conversion rates on your blog or website.
Size
Size is crucial for a good call-to-action button. Generally the bigger the button, the more noticeable it will be, and the more conversions you will get. Large call-to-action buttons are one of the traits of Web 2.0 that have continued into more recent design, simply because they are so successful. Of course you don’t want to go over board, as an overly large button may appear unprofessional, or distract from other important content.
1. Pingdom
Pingdom use a very large, bold call-to-action button that is hard to miss!
2. Little Lines
Little Lines uses a large, prominent arrow shaped button to capture visitor’s attention.
3. Dev Hub
DevHub uses a very Web 2.0 style button, large, with a bright gradient. The rounded rectangle shape also helps draw attention.
Contrast
Contrast is crucial in constructing an effective call-to-action button. The button should stand out against the website’s background, but also the other elements of the web page. Often great call to action buttons use a color significantly brighter and more colorful than the rest of the page. Naturally this single area of color will attract the user’s attention the most.
4. Plazaa
Whilst Plazaa have a few splashes of color across their website, by far the greatest concentration of color is in the call-to-action button. Naturally the eye is drawn to this area of the page.
5. Sky Ledger
Sky Ledger is a very gray design, and therefore the green call-to-action button really stands out against the very of the muted design.
6. Velvet Ink Media
The buttons at Velvet Ink Media really stand out, by contrasting the plain white background with their bold blue color.
Positioning and Padding
Call-to-action buttons have significantly less impact if they are cramped by surrounding content. In order to really stand out they must be surrounded by a lot of white space, and positioned in a position that will most viewed by the user. Traditional reading conventions state that a visitors eye will move down a page, and left to right. Therefore this should be in the designers mind when positioning their call-to-action buttons. A button in the top right of your page will have less conversions than one in the middle, or one beneath left-column welcome text.
7. Web Design Preston
Web Design Preston has 2 call-to-action buttons, and both are placed in a very logical place – in the left column, right beneath the welcome paragraph. The user’s eye should naturally end up scanning down to this area.
8. Square Four
Square Four has used a lot of padding around their button, and by giving it ‘room to breathe’ there are no distractions from people clicking it.
9. Rapportive
Rapportive have placed their call-to-action button right beneath their logo, and given it a nice amount of padding. This means that the viewer’s eye logically goes there.
Don’t Have Too Many:
Generally as a rule of thumb you shouldn’t have more than 2 primary call-to-action buttons. The more buttons you have, the less impact each individual button will have, and often too many buttons can confuse your viewers.
You should always think carefully about the main purpose of your site, and then taylor a single button around this.
10. FanExtra
Just a quick shout out for our upcoming network 
. We were careful to only place a single button on the site, as the page had a sole purpose (for people to sign up).
11. Xhtml Chef
Xhtml Chef uses a prominent call-to-action button, that stands out as the sole and primary method to click through.
12. Digiti
Digiti uses a single call-to-action button prompting visitors to ‘join us’. The button is clearly the only area of the site prompting an action, rather than providing information.
Include Subtle Design Touches
Even if you use all of the above points, your button may have impact and attract plenty of attention, but it still needs to be well designed! A well designed button will always get more conversions than a badly designed one, as it associates a level of professionalism with the service of product being offered.
13. Simple Drive
Rather than simply using a plain button, Simple-Drive has added a 1px stroke, drop shadow and inner shadow to their button, as well as given it a striped background effect.
14. Deploy CMS
The cool pinned up notice effect is a really unique type of button. By integrating so nicely into the design and creating a cool vector design, it has a lot more impact than a regular plain button.
15. Chimera Themes
Chimera Themes uses a fairly standard looking button, but it emphasizes it through use of a gradient background, glow effect and drop shadow.
Can You Think of Any Other Principles?
If you can think of any further principles of great call-to-action buttons then please leave them in the comments below!
About the Author:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
10 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
Fabulous. All of it.. Just amazing information- leads and opportunities here. I am really enjoying this site. Thank you!
Hi, thanks for the nice list. I would add: a clear and explicative sentence on the button, not just “click here” or “read on”
Great collection of call to action… Thanks.!!
If a company needs to promote their services but want them to deal interactively with the site then the call to action buttons are really important and are becoming more and more popular on sites. Advice, hints and tips on this are really useful so thank you for the help.
A great collection of call to action buttons and some very useful tips. Call to action buttons are very important if companies want to promote services or products and allow visitors to interact more with the site.
Thank you very much for showing our site at Velvet Ink Media. We do appreciate it
Thank you for these tips! I agree with what you said and I think companies should pay more attention to call to action elements because they are vital for good design and convert users. Too many sites use labels like “Register now” or “Create an account”. Unfortunately these don’t convey value to the user. Alternatively “Connect with friends” and “Start browsing faster” are better value propositions which will convert more users.
The Call to Action is such a fundamental part of web design (and online marketing in general). I think the biggest crime that sooo many web designers make is a failure to captivate their audience, and therefore failure to compel the visitor to take action. Hence so many websites with high visitor numbers but low conversion rate
Well put! Conversion rates are always sadly under-rated over large amounts of traffic. In many ways they’re easier to improve than it is to attain more traffic though.
Very helpful post!